<template>
  <div style="background-color:white;margin:10px;border-radius:10px;height:90vh;padding:10px">
    <el-row style="background-color:white;border-radius:10px;padding-top:1%;margin-right: 10px;" type="flex" align="middle">
      <el-form :model="queryParam" ref="form" label-width="80px" :inline="true" size="mini">
        <!-- <el-form-item label="部门名称">
          <el-input v-model="queryParam.deptName"></el-input>
        </el-form-item> -->
        <el-form-item label="人员">
          <tl-ref-user v-model="queryParam.userCode" :initDisplayData="queryParam.userName" dataType="id" :singleSelect="true" :readonly="true" @confirm="userRefConfirm"></tl-ref-user>
        </el-form-item>
        <el-form-item label="开始日期" size="mini">
          <el-date-picker v-model="queryParam.startDate" placeholder="如：2021-01-01" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" size="mini">
          <el-date-picker v-model="queryParam.endDate" placeholder="如：2021-01-01" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="" size="mini">
          <el-button type="primary" @click="loadData">查询</el-button>
        </el-form-item>
        <!-- <el-row style="margin-top:20px" type="flex" align="middle">
          <el-form-item label="按模块统计" label-width="100px" size="mini">
            <el-radio-group v-model="redioGroup" :max="1" size="medium" fill="#00A96E" @change="redioGroupChange">
              <el-radio-button label="projectTrack">项目追踪</el-radio-button>
              <el-radio-button label="projectQuery">项目查询</el-radio-button>
              <el-radio-button label="projectApprove">项目立项</el-radio-button>
              <el-radio-button label="myTask">我的任务</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item size="mini">
            <el-alert title="默认统计近一个月的数据" type="warning" :closable="false" show-icon>
            </el-alert>
          </el-form-item>
        </el-row> -->
      </el-form>
    </el-row>
    <!--表格渲染-->
    <el-table class="tl-table" ref="mainTable" v-loading="loading" :data="datas" row-key="id" border fit :loading="loading">
      <el-table-column type="index" label="序号" width="100px" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="operatedate" label="日期" align="center" width="200px" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="username" label="姓名" align="center" width="200px" header-align="center" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="modulename" label="模块名称" align="center" width="300px" header-align="center" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="clickcount" label="点击次数" align="center" width="100px" header-align="center" :show-overflow-tooltip="true"> </el-table-column>
    </el-table>
    <!-- 列表分页 -->
    <el-row class="pagebar" ref="pager">
      <el-pagination @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :total="pageInfo.totalCount" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
    </el-row>
  </div>
</template>

<script>
import { formatDate } from "@tapui/utils/date"
import { getAction } from '@tapui/utils/http'
import { filterObjectNull, rmbFormat } from '@tapui/utils/util'

export default {
  components: {},
  data() {
    return {
      redioGroup: "projectTrack",
      queryParam: { cboModuleCode: '100002', moduleName: '项目追踪' },
      datas: [],
      // 分页信息
      pageInfo: {
        currentPage: 1, // 当前页面
        pageSize: 10, // 每页记录数
        pageSizes: ['10', '50', '100'],
        totalCount: 0 // 总数
      },
      dateList: [],
      // 遮幕
      loading: false,
      // 排序参数
      sorterInfo: {
        sidx: 'sortcode',
        sord: 'asc'
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    userRefConfirm(userParam) {
      if (userParam.length > 0) {
        this.queryParam.userCode = userParam[0].code
        this.queryParam.userName = userParam[0].name
      } else {
        this.queryParam.userCode = null
        this.queryParam.userName = null
      }
    },
    /** 获取查询参数 */
    getQueryParams() {
      let param = {}
      Object.assign(param, this.queryParam, this.sorterInfo, this.filtersInfo)
      param.currentPage = this.pageInfo.currentPage
      param.pageSize = this.pageInfo.pageSize
      return filterObjectNull(param)
    },
    /** 页面跳转 */
    doChangeIndex(val) {
      if (this.pageInfo.currentPage !== val) {
        this.pageInfo.currentPage = val
        this.loadData({})
      }
    },
    /** 每页大小改变*/
    doChangeSize(val) {
      if (this.pageInfo.pageSize !== val) {
        this.pageInfo.pageSize = val
        this.pageInfo.currentPage = 1
        this.loadData({})
      }
    },
    loadData() {
      var param = this.getQueryParams()
      if (!param.userCode || param.userCode === '') {
        this.$tap.alert("请选择人员", "warning")
        return
      }
      this.loading = true
      // 得到加载分页
      Object.assign(this.queryParam, this.sorterInfo, this.filtersInfo, this.getQueryParams())
      getAction("/mpm/mpmStatisticsContoller/moudleLogStatistics", this.queryParam).then(res => {
        this.datas = res.result.dataList
        this.pageInfo.totalCount = res.result.totalCount
        this.loading = false
      })
    },
    redioGroupChange() {

    },
    // 格式化日期 yyyy-MM-dd
    dateFormat(row, column, cellValue, index) {
      let dateValue = row[column.property]
      if (dateValue && dateValue.length > 0) {
        return formatDate(new Date(dateValue.replace(new RegExp(/-/gm), '/')), 'yyyy-MM-dd')
      } else {
        return ''
      }
    }
  },
  created() {
  },
  mounted() { },
  beforeCreate() { },
  beforeMount() { },
  beforeUpdate() { },
  updated() { },
  beforeDestroy() { },
  destroyed() { },
  activated() { }
}
</script>
<style  scoped>
</style>

